function App() {

  // number string boolean  
  const num:number = 15;
  const str:string = "我爱我的";
  const flag:boolean = true;
  const abc:any = "我是any"
  // 大部分的时候ts能通过值来推断是什么类型
  const counter = 15;
  // 定义数组
  // number类型的数组
  const list:number[] = [1,2,3];
  // 定义Array类型的数组,数组的值必须是string字符串
  const arr:Array<string> = ["abc","def","oqp"];
  // 定义元祖
  const tuple:[string,number] = ["love",100];
  // 函数定义
  function addNum(a:number,b:string):void{
    alert(b);
    // return a*2;
  }
  const getNum = (a:string,b:string):string=>a+b;
  const re = getNum("我喜欢","写代码");
  console.log(re)
  // 定义对象:
  const obj:object = {
    name:"mumu",
    age:18
  }
  console.log(obj)
  // 定义接口
interface Person{
  name:string
  age:number
}
const obj2:Person = {
  name:"老曾",
  age:18
}
console.log(obj2.name)

// 接口定义函数
interface ISum {
  (x:number,y:number):number
}
const sum:ISum = (x,y)=>x*2+y*2;
console.log(sum(2,3));

// 定义不确定
interface IRandom{
  [propsName:string]:string|number
}
const  ran:IRandom = {
  width:100,
  height:"很高",
}
console.log(ran.height)
let n:number|string = "15";
n = 100;
console.log(n)

type Student = Person&{grade?:number}
const s:Student = {
  name:"小小曾",
  age:5,
  grade:-1
}
console.log(s)

type Gender = "男"|"女"|"保密";
const gen:Gender = "女";
console.log(gen)

type User = {
  readonly name:string;
  password:string;
  avatar:string};
type Staff = User&{company:string};

const s2:Staff = {
  name:"小小李",
  password:"8888",
  avatar:"",
  company:"奇酷"
}
// s2.name = "大大曾";
// | & ? readonly 
console.log(s2)
console.log(num,str,flag,abc,counter,list,arr,tuple);

// 泛型类型的形参
// function print(str1:string|number,str2:string|number):string|number{
//   console.log(str1,str2);
//   return str1+str2;
// }
// print("你好","中国");
// print(15,5);
// function print<T>(str1:T,str2:T):T{
//   console.log(str1,str2);
//   return str1;
// }
// print<number>(15,5);
// print<string>("abc","def");
// print("abc","def");//自动推断泛型
// print(5,3);

function swap<T,U>(tuple:[T,U]):[U,T]{
  return [tuple[1],tuple[0]]
}
const re2 =  swap<string,number>(["love",100]);
console.log(re2);
  return ( <div>
    <h1 onClick={()=>addNum(15,"ts复杂")}>TypeScript</h1>
  </div> );
}

export default App;